<template>
  <!-- 操作日志 -->
  <div class="advert-negative-keyword-wrap table-gl-w">
    <div class="search-w table-filter-form">
      <div class="filter-list flex-c">
        <template v-for="(item, i) in filterItem" :key="i">
          <div class="filter-item">
            <template v-if="item.type == 'input_search'">
              <a-input-search v-model="item.value" :style="{ width: item.width + 'px' }" :placeholder="item.placeholder || item.label" allow-clear @press-enter="setSearchVal" @clear="setSearchVal" @search="setSearchVal" />
            </template>
            <template v-else-if="item.type == 'select_multiple'">
              <selectMultiple :key="item.key" :info="item" :defaultVal="item.value" @change="selectMulVal($event, item)" />
            </template>
            <template v-else-if="item.type == 'select'">
              <a-select v-model="item.value" :style="{ width: item.width + 'px' }" :placeholder="item.placeholder || item.label" allow-clear @change="setSearchVal">
                <a-option v-for="(option, s) in item.optionItems" :key="s" :value="option.value" :label="option.label" />
              </a-select>
            </template>
            <template v-else-if="item.type == 'date_range'">
              <a-range-picker v-model="item.value" :="item.attrs" shortcuts-position="left" :shortcuts="rangeShortcuts()" :style="{ width: item.width + 'px' }" @change="setSearchVal" />
            </template>
          </div>
        </template>
        <div class="filter-item">
          <a-button @click="resetAll">重置</a-button>
        </div>
      </div>
      <div class="filter-result" v-show="resultTags.length > 0">
        <a-space wrap>
          <a-tag v-for="item in resultTags" size="small" color="arcoblue" closable :key="item.key" @close="delTag(item)">
            <template v-if="!(item.tagVal instanceof Array && item.tagVal.length > 2)">
              <span> {{ item.label }}：</span>
              <p>{{ item.tagVal instanceof Array ? item.tagVal?.join(',') : item.tagVal }}</p>
            </template>
            <a-popover v-else position="bottom">
              <div class="flex-c">
                <span> {{ item.label }}：</span>
                <p>{{ item.tagVal[0] }}，{{ item.tagVal[1] }}等{{ item.tagVal.length }}项</p>
              </div>
              <template #content>
                <p v-for="(val, j) in item.tagVal" :key="j">{{ val }}</p>
              </template>
            </a-popover>
          </a-tag>
          <a-button type="text" style="color: #000430" v-if="resultTags.length > 1" size="mini" @click="resetAll">清除全部</a-button>
        </a-space>
      </div>
    </div>
    <a-scrollbar style="flex: 1; overflow-y: auto; height: 100%">
      <!-- 日志列表 -->
      <AdLogTable ref="adLogTableRef" :searchParams="searchParam" />
    </a-scrollbar>
  </div>
</template>
<script lang="ts" setup>
  import { FilterTableItem } from '@/types/components'
  import selectMultiple from '@/components/Form/selectMultiple.vue'
  import AdLogTable from './components/adLogTable.vue'
  import { rangeShortcuts } from '@/utils/timeFormat'
  import { ref, onMounted, nextTick } from 'vue'
  import useAdvertStore from '@/store/modules/advert'
  onMounted(() => {
    setSearchVal()
  })

  const advertStore = useAdvertStore()
  const filterItem = ref<Array<FilterTableItem>>([
    {
      key: 'changeTypes',
      label: '操作类型',
      value: ref(),
      type: 'select_multiple',
      width: 160,
      optionItems: [
        {
          label: '创建',
          value: 'CREATED',
        },
        {
          label: '预算金额调整',
          value: 'BUDGET_AMOUNT',
        },
        {
          label: '调整是否在预算中',
          value: 'IN_BUDGET',
        },
        {
          label: '状态',
          value: 'STATUS',
        },
        {
          label: '结束时间',
          value: 'END_DATE',
        },
        {
          label: '开始时间',
          value: 'START_DATE',
        },
        {
          label: '调整投放位置组',
          value: 'PLACEMENT_GROUP',
        },
        {
          label: '调整竞价策略',
          value: 'SMART_BIDDING_STRATEGY',
        },
        {
          label: '默认竞价调整',
          value: 'DEFAULT_BID_AMOUNT',
        },
        {
          label: '名称调整',
          value: 'NAME',
        },
      ],
    },
    {
      key: 'entityTypes',
      label: '实体类型',
      value: ref(),
      type: 'select_multiple',
      width: 140,
      optionItems: [
        {
          label: '广告活动',
          value: 'CAMPAIGN',
        },
        {
          label: '广告组',
          value: 'AD_GROUP',
        },
        {
          label: '商品投放',
          value: 'PRODUCT_TARGETING',
        },
        {
          label: '关键词',
          value: 'KEYWORD',
        },
        {
          label: '否定关键词',
          value: 'NEGATIVE_KEYWORD',
        },
        {
          label: '广告商品',
          value: 'AD',
        },
        {
          label: '广告组合',
          value: 'PORTFOLIO',
        },
      ],
    },
    {
      key: 'systemOperation',
      label: '操作系统',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [
        {
          label: 'SAAS',
          value: 'Saas',
        },
        {
          label: '亚马逊',
          value: 'Amazon',
        },
      ],
    },
    {
      key: 'createUser',
      label: '操作人',
      value: ref(),
      type: 'input_search',
      width: 160,
    },
    {
      key: 'date',
      label: '日期',
      value: ref(advertStore.currentSearchTime),
      type: 'date_range',
      width: 240,
      attrs: {
        placeholder: ['开始日期', '结束日期'],
      },
    },
  ])
  const resultTags = ref<any>([])
  const searchParam = ref<any>()
  const adLogTableRef = ref()

  //查询表格数据
  function startSearch() {
    nextTick(() => {
      adLogTableRef.value.getTableListByVal()
    })
  }
  // 批量选择数据
  function selectMulVal(searchVal: any, item: any) {
    item.value = searchVal
    setSearchVal()
  }
  function setSearchVal() {
    setResultTags()
    searchParam.value = {
      shopId: advertStore.currentShop.shopId,
    }
    if (advertStore.currentLevel == 'campaign') {
      searchParam.value.campaignId = advertStore.currentCampaign.campaignId
    }
    filterItem.value.forEach((el: FilterTableItem) => {
      if (el.key == 'date') {
        searchParam.value.startDate = el.value?.[0]
        searchParam.value.endDate = el.value?.[1]
      } else {
        searchParam.value[el.key] = el.value
      }
    })
    advertStore?.changeSearchVal(searchParam.value)
    startSearch()
  }
  function setResultTags() {
    resultTags.value = []
    filterItem.value.forEach((el: FilterTableItem) => {
      let val: any = el.value
      let noVal = val === '' || val === null || val === undefined || (val instanceof Array && val.length === 0)
      if (!noVal) {
        resultTags.value.push({
          ...el,
          tagVal: getTagVal(el),
        })
      }
    })
  }
  // 获取查过结果显示的值
  function getTagVal(item: FilterTableItem) {
    if (item.value instanceof Array) {
      return item.value.map((str: string) => {
        return enumVal(item.optionItems, item.optionField, str)
      })
    } else {
      return enumVal(item.optionItems, item.optionField, item.value)
    }
  }
  function enumVal(optionItems: any, optionField: any, str: any) {
    if (!optionItems?.length) return str
    let option = optionItems?.find((e: any) => str == e.value)
    return option?.label || str
  }
  function resetAll() {
    filterItem.value.forEach((el: FilterTableItem) => {
      if (el.key == 'date') {
        el.value = ref(advertStore.currentSearchTime)
      } else {
        el.value = ref()
      }
    })
    setSearchVal()
  }
  function delTag(data: any) {
    let index = filterItem.value.findIndex((el: FilterTableItem) => el.key == data.key)
    filterItem.value[index].value = ref()
    setSearchVal()
  }
</script>
<style lang="less" scoped>
  .advert-negative-keyword-wrap {
    height: calc(100vh - @menuAndTabHeight);
  }
  .filter-item {
    margin-right: 8px;
    margin-bottom: 5px;
  }
  .filter-result {
    margin-bottom: 5px;
  }
  .filter-list {
    flex-wrap: wrap;
  }
  .arco-scrollbar {
    flex: 1;
    overflow-y: hidden;
    margin-top: 10px;
  }
</style>
